<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>JavaScript下拉菜单</title> 
<style type="text/css"> 
* { 
padding:0; 
margin:0; 
} 
#navigation, #navigation li ul { 
list-style-type:none; 
} 
#navigation { 
margin:0px; 
} 
#navigation li { 
float:left; 
text-align:left; 
position:relative; 
} 
#navigation li a:link, #navigation li a:visited { 
display:block; 
text-decoration:none; 
color:#000; 
width:120px; 
height:30px; 
line-height:30px; 
border:1px solid #fff; 
border-width:1px 1px 0 0; 
background:#c5dbf2; 
padding-left:10px; 
} 
#navigation li a:hover { 
color:#fff; 
background:#2687eb; 
} 
#navigation li ul li a:hover { 
color:#fff; 
background:#6b839c; 
} 
#navigation li ul { 
display:none; 
position:absolute; 
top:30px; 
left:0; 
margin-top:1px; 
width:120px; 
} 
#navigation li ul li ul { 
display:none; 
position:absolute; 
top:0px; 
left:130px; 
margin-top:0; 
margin-left:1px; 
width:120px; 
} 
</style> 
<script type="text/javascript"> 
function displaySubMenu(li) { 
var subMenu = li.getElementsByTagName("ul")[0]; 
subMenu.style.display = "block"; 
} 
function hideSubMenu(li) { 
var subMenu = li.getElementsByTagName("ul")[0]; 
subMenu.style.display = "none"; 
} 
</script> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> 
<body leftmargin="0px" topmargin="0px" marginwidth="0px" marginheight="0px"> 
<div style="height: 44px;background-color:#123456;">
<ul id="navigation"> 


    <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
    <a href="#">栏目1 ↓</a> 
        <ul> 
            <li><a href="#">1.1</a></li> 
            <li><a href="#">1.2</a></li> 
            <li><a href="#">1.3</a></li> 
            <li><a href="#">1.4</a></li> 
        </ul> 
    </li> 
    
    
    <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
    <a href="#">栏目2 ↓</a> 
        <ul> 
            <li><a href="#">2.1</a></li> 
            <li><a href="#">2.2</a></li> 
            <li><a href="#">2.3</a></li> 
            <li><a href="#">2.4</a></li> 
            <li><a href="#">2.5</a></li> 
        </ul> 
    </li> 
    
    
    <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
    <a href="#">栏目3 ↓</a> 
        <ul> 
        
            <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
            <a href="#">3.1 →</a> 
                <ul> 
                    <li><a href="#">3.1.1</a></li> 
                    <li><a href="#">3.1.2</a></li> 
                    <li><a href="#">3.1.3</a></li> 
                    <li><a href="#">3.1.4</a></li> 
                </ul> 
            </li> 
            
            <li><a href="#">3.2</a></li> 
            
            <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
            <a href="#">3.3 →</a> 
                <ul> 
                    <li><a href="#">3.3.1</a></li>
                    <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
                    <a href="#">3.3.2 →</a>
                        <ul> 
                        <li><a href="#">3.3.2.1</a></li> 
                        <li><a href="#">3.3.2.2</a></li> 
                        <li><a href="#">3.3.2.3</a></li> 
                        <li><a href="#">3.3.2.4</a></li> 
                        </ul>
                    </li>
                    <li><a href="#">3.3.3</a></li> 
                    <li><a href="#">3.3.4</a></li> 
                </ul> 
            </li> 
            
        </ul> 
    </li> 
</ul>
</div> 
<div style="margin-left: 20px;">
d sda
g sdfg 
sd
gf sd
gf s
dgf 
sdg
</div>
</body> 
</html> 
